<template>
  <div class="zui-input-field" :class="{ 'label-position-top': labelPosition == 'top' }">
    <zui-field
      class="field"
      :padding="fieldPadding"
      :required="required"
      :label-position="labelPosition"
      :label-style="labelStyle"
      :round="round"
      :show-shadow="showShadow"
      :label="label"
      :clickable="false"
    >
      <template #accessory>
        <zui-input
          padding="8px 0"
          class="input"
          :type="type"
          :show-border="false"
          v-model="value"
          :multiline="multiline"
          :show-word-limit="showWordLimit"
          :max-word-length="maxWordLength"
          :placeholder="placeholder"
          :clearable="clearable"
          :textAlign="textAlign"
          :readonly="readonly"
        />
      </template>
    </zui-field>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: String,
  type: String,
  round: Boolean,
  showShadow: Boolean,
  labelPosition: String,
  //weak/normal/strong
  labelStyle: String,
  label: String,
  required: Boolean,
  multiline: Boolean,
  showWordLimit: Boolean,
  maxWordLength: Number,
  placeholder: String,
  clearable: Boolean,
  textAlign: String,
  readonly: Boolean
})

const fieldPadding = props.labelPosition == 'top' ? '16px 20px 12px 20px' : '4px 20px'

const value = ref(props.modelValue)
watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
watch(value, (inputValue) => {
  emit('update:modelValue', inputValue)
})
</script>
<style lang="scss" scoped>
.zui-input-field {
  &.label-position-top {
    .input {
      margin-top: 4px;
    }
  }
}
</style>
